import * as THREE from "../../lib/three.module.js";
import { GLTFLoader } from "../../lib/loaders/GLTFLoader.js";

const glbLoadModel = function () {
  const loader = new GLTFLoader();
  loader.load(
    this.modelPath,
    (gltf) => {
      this.modelObject = gltf.scene;
      this.scene.add(this.modelObject);

      this.modelObject.traverse(function (object) {
        if (object.isMesh) object.castShadow = true;
      });

      const { animations } = gltf;
      if (animations && animations.length > 0) {
        this.mixer = new THREE.AnimationMixer(this.modelObject);
        this.animationClip = gltf.animations;
        this.actions = [];
        gltf.animations.forEach((item) => {
          this.actions.push(this.mixer.clipAction(item));
        });
      }

      this.skeleton = new THREE.SkeletonHelper(this.modelObject);
      this.skeleton.visible = false;
      this.scene.add(this.skeleton);

      this.setScaleToFitSize(this.modelObject);
      this.setPositionToFitGrid(this.modelObject);
      this.createPanel();
    },
    this.loadProgress.bind(this)
  );
};

export default glbLoadModel;
